<template>
  <div v-if="walletShow.showBank" class="overlay">
    <div
      class="bg-[#1a2c38] m-auto text-white rounded-xl shadow-lg max-w-[440px] w-full max-h-[600px]"
    >
      <div
        class="flex justify-between rounded-t-lg items-center p-2 bg-[#2f4553]"
      >
        <div>
          <div v-if="!showMoney" @click="reachngMony">
            <svg
              width="18"
              height="18"
              viewBox="0 0 48 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12.9998 8L6 14L12.9998 21"
                stroke="#fff"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M6 14H28.9938C35.8768 14 41.7221 19.6204 41.9904 26.5C42.2739 33.7696 36.2671 40 28.9938 40H11.9984"
                stroke="#fff"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
        </div>

        <div v-if="!showAddbanckTab" class="p-1">
          {{ $t("layer.wallet.withdrawMoney") }}
        </div>
        <div v-else class="bg-[#1f2937] flex rounded p-1 text-[#c9d1e4]">
          <div
            @click="activeItem(item)"
            v-for="(item, index) in state.headerTab"
            class="py-[9px] px-[12px] text-[12px] rounded"
            :class="item.id == activeTab ? 'activeClass' : ''"
          >
            {{ $t(item.lang) }}
          </div>
        </div>
        <close @click="closeProp" />
      </div>
      <div
        class="px-[14px] py-[12px] overflow-hidden h-full max-h-[460px] overflow-y-auto"
      >
        <myBanck
          v-if="activeTab == 'myBanck'"
          @showMoney="getShowMoney"
          @shoAddbanck="shoAddbanck"
          ref="myBanckData"
        />
        <addBanck v-else @showMoney="getShowMoney" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, nextTick } from "vue";
import { mainWallet } from "@/store/wallet";
import myBanck from "./myBanck.vue";
import addBanck from "./addBanck.vue";
import { mainAct } from "@/store/activeda";

const main = mainAct();
const showMoney = ref(true);
const showAddbanckTab = ref(false); // 控制tab切换
const walletShow = mainWallet();
const state = reactive({
  headerTab: [
    {
      name: "我的银行卡",
      id: "myBanck",
      lang: "layer.wallet.myBanck"
    },
    {
      name: "添加银行卡",
      id: "addBanck",
      lang: "layer.wallet.addBanck"
    }
  ]
});

const activeTab = ref("myBanck");

const activeItem = (item: any) => {
  activeTab.value = item.id;
  if (item.id == "myBanck") {
    nextTick(() => {
      console.log("myBanckData.value", myBanckData.value);
      if (myBanckData.value) {
        myBanckData.value?.setBanckList();
      }
    });
    // myBanckData.value?.showBanckDeit = "bankList";
  }
};

const closeProp = () => {
  walletShow.showBank = false;
};

const getShowMoney = (boole: boolean) => {
  console.log("获取参数", boole);

  showMoney.value = boole;
};
const shoAddbanck = () => {
  showMoney.value = false;
  showAddbanckTab.value = true;
  activeTab.value = "addBanck";
};

const reachngMony = () => {
  showMoney.value = true;
  showAddbanckTab.value = false;
  activeTab.value = "myBanck";
  nextTick(() => {
    myBanckData.value?.setWalletClear();
  });
};

const myBanckData = ref();
watch(
  () => walletShow.showBank,
  newBoole => {
    if (newBoole) {
      console.log(
        "const main = mainAct();----const main = mainAct();",
        main.user_detail.payment_password_set
      );

      nextTick(() => {
        myBanckData.value?.setWalletClear();
      });
      document.body.style.overflow = "hidden";

      activeTab.value = "myBanck";
      showAddbanckTab.value = false;
      if (!main.user_detail.payment_password_set) {
        activeTab.value = "setPwd";
      }
    } else {
      document.body.style.overflow = "";
    }
  }
);
</script>

<style lang="scss" scoped>
@media screen and (min-width: 601px) {
  .banck_box {
    display: flex;
    justify-content: center;
  }
}
.van-overlay {
  display: flex;
}
.activeClass {
  color: #1475e1;
  background-color: #2f4553;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1011;
}
</style>
